<template>
    <div class="dashboard-container" >
        <div class="chart-hot-mtv">
            <h3>近期高分影视分数趋势</h3>
            <div ref="dashboardRef1" style="width:100%;height:100%"></div>
        </div>
        <div class="chart-hot-collection">
            <div ref="dashboardRef2" style="width:100%;height:100%"></div>
        </div>
        <div class="chart-average-grade">
            <div class="grade-top">
                <h3>影视类型占比</h3>
                <el-button type="primary" color="#000000" @click="switchDiagram">
                    <Icon icon="pie-mode" v-if="DR3 !== 'visible'" />
                    <Icon icon="bar-mode" v-else />
                </el-button>
            </div>
            
            <div class="grade-container" >
                <div ref="dashboardRef3"  :style="'visibility:'+DR3" ></div>
                <div ref="dashboardRef4"  :style="'visibility:'+DR4"></div>
            </div>
        </div>
        <div class="website-user">
            <h3>网站相关统计</h3>
            <div class="register-count">
                <el-statistic title="总计注册用户数：" :value="totalUser"  />
                <el-statistic title="总计评论文章数：" :value="totalComment"  />
                <el-statistic title="今日新增注册用户数：" :value="newUser"  />
                <el-statistic title="今日新增评论文章数：" :value="newComment"  />
            </div>
            <div class="line-diagram">
                <div ref="dashboardRef5" style="width:100%;height:100%"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
 import { ref, onMounted,onBeforeMount,nextTick,shallowRef,onUnmounted} from 'vue';  
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts';
import Icon from '@/components/Icon.vue';
import { ElStatistic} from 'element-plus';
import { useTransition } from '@vueuse/core';
import {getTypeProportion} from '@/api/index.js';
import {getPastDaysAsStrings} from '@/utils/common.js';
// 引入柱状图图表，图表后缀都为 Chart
//  import { BarChart } from 'echarts/charts';
//  import {TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent} from 'echarts/components';
// // // 标签自动布局、全局过渡动画等特性
//  import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
// import { CanvasRenderer } from 'echarts/renderers';
/*统计部分变量*/
const totalUserAmount = ref(0);
const totalCommentAmount = ref(0);
const newUserAmount = ref(0);
const newCommentAmount = ref(0);
const totalUser = useTransition(totalUserAmount, {
duration: 900,
});
const totalComment = useTransition(totalCommentAmount, {
duration: 1000,
});
const newUser = useTransition(newUserAmount, {
duration: 2500,
});
const newComment = useTransition(newCommentAmount, {
duration: 2000,
});
/*模板引用变量*/
const [dashboardRef1,dashboardRef2,dashboardRef3,dashboardRef4,dashboardRef5] = Array(5).fill(null).map(() => shallowRef(null));  
let DR3 = ref('visible');
let DR4 = ref('hidden');
const chartArr = ref([]);
// const config_arr = ref([
//     {option:{},ref:dashboardRef1},
//     {option:{},ref:dashboardRef2},
//     {option:{},ref:dashboardRef3},
//     {option:{},ref:dashboardRef4},
//     {option:{},ref:dashboardRef5},
// ]);
// onBeforeMount(() => {
//     queryProportionData();
// })

window.addEventListener('resize', () => {
    chartArr.value.forEach((chart) => {
        chart.resize();
    })
});

onMounted(()=>{
    queryProportionData(); 
});
// onUnmounted(() => {
//     window.removeEventListener('resize', () => {});
//   });
/*初始化图表的方法*/
const initChart = (option,dashboardRef) => {
    let myChart = echarts.init(dashboardRef);
    chartArr.value.push(myChart);
    myChart.setOption(option);
}
/*初始化所有图表*/
// const initAllChart = ()=>{
//     config_arr.value.forEach(item=>{
//         initChart(item.option,item.ref)
//     })
// }
/*切换饼图和条形图*/
const switchDiagram = ()=>{
    DR3.value === 'visible'?DR3.value = 'hidden':DR3.value = 'visible';
    DR4.value === 'hidden'?DR4.value = 'visble':DR4.value = 'hidden';
}
//获取饼图数据--影视类型占比
const queryProportionData = async ()=>{
    getTypeProportion().then(res=>{
        if(res.status.code === 200){
            let highScoreTrends = {
                xAxis: {name: '日期',nameLocation: 'end',data:getPastDaysAsStrings(5) },
                // getPastDaysAsStrings(res.data.highScoreTrends.actual_days)
                yAxis: {name: '分数',nameLocation: 'end',type: 'value',data: [2.0,4.0,6.0,8.0,10.0]},
                legend: {data: res.data.highScoreTrends.trends_name},
                axisPointer:{show:true},
                dataZoom: [{type: 'slider',xAxisIndex: 0,start: 0,end: 100},{type: 'inside',xAxisIndex: 0,start: 0,end: 100}],  
                tooltip: {show:true}, 
                toolbox:{show:true,feature:{saveAsImage:{name:'MTSAS-近期热门电影分数趋势',title:'保存为图片'}}},
                series: res.data.highScoreTrends.trends
            };
            let pie = {
                toolbox:{show:true,feature:{saveAsImage:{show:true,title:'保存为图片'}}},
                legend: {type: 'scroll',orient: 'vertical',left: 10,},
                tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c}%'},
                series: [res.data.pie]
            };
            let bar = {
                xAxis: {type: 'category',data: ['动作', '恐怖','战争', '动画', '爱情', '科幻', '悬疑','喜剧','犯罪','剧情','惊悚','冒险','传记']},
                yAxis: {type: 'value',data:[0,25,50,75,100]},
                dataZoom: [{type: 'inside'}],
                tooltip: {trigger:'axis',formatter: '{a} <br/>{b} : {c}%',axisPointer:{type:'line'}},
                toolbox:{show:true,feature:{saveAsImage:{show:true,title:'保存为图片'}}},
                series: [{name: '类型占比',type: 'bar',data: res.data.bar,showBackground: true,itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#83bff6' },{ offset: 0.5, color: '#188df0' },{ offset: 1, color: '#188df0' }])},emphasis: {itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#2378f7' },{ offset: 0.7, color: '#2378f7' },{ offset: 1, color: '#83bff6' }])}}}] 
            };
            let realTimeData = {
                title: {text: '影视实时热度排名'},
                xAxis: {name:'浏览数',type: 'value',max: 'dataMax'},
                yAxis: {name:'名称',nameLocation: 'start',type: 'category',data: res.data.hotest.newTitleArr,axisLabel:{rotate:60},inverse: true,animationDuration: 300,animationDurationUpdate: 300,max:4}, 
                dataZoom: [{type: 'slider'},{type:'inside'}],
                tooltip: {trigger:'axis',axisPointer:{type:'shadow'}},
                toolbox:{show:true,feature:{saveAsImage:{show:true,title:'保存为图片'}}},
                legend:{show:true},
                series: [{realtimeSort: true,type: 'bar',barWidth:'60%',data:res.data.hotest.viewArr,label: {show: true,position: 'insideRight',valueAnimation: true},large: true}],
                animationDuration:0,
                animationDurationUpdate:3000,
                animationEasing: 'linear',
                animationEasingUpdate: 'linear'
            }
            let statistic = {
                xAxis: {name: '日期',nameLocation: 'end',data:getPastDaysAsStrings(5)},
                yAxis: {name: '数量',nameLocation: 'end',type: 'value',data:[0,25,50,75,100]},
                legend: {},
                axisPointer:{show:true},
                dataZoom: [  {type: 'slider', xAxisIndex: 0,start: 0,end: 100},{type: 'inside',xAxisIndex: 0,start: 0,end: 100}],  
                tooltip: {show:true},
                toolbox:{show:true,feature:{saveAsImage:{name:'新增趋势',title:'保存为图片'}}},
                series: [{name: '近期新增用户数',data: res.data.register.count,type: 'line',label:{show:true,position:'top'}},{name: '近期新增评论文章数',data:res.data.comment.count,type: 'line',label:{show:true,position:'top'}}]
            };
            // config_arr.value[0].option = highScoreTrends;
            // config_arr.value[1].option = realTimeData;
            // config_arr.value[2].option = pie;
            // config_arr.value[3].option = bar;
            // config_arr.value[4].option = statistic;
            initChart(highScoreTrends,dashboardRef1.value);
            initChart(realTimeData,dashboardRef2.value);
            initChart(pie,dashboardRef3.value);
            initChart(bar,dashboardRef4.value);
            initChart(statistic,dashboardRef5.value);
            // myChart1.value.setOption(highScoreTrends);
            // myChart2.value.setOption(realTimeData);
            // myChart3.value.setOption(pie);
            // myChart4.value.setOption(bar);
            // myChart5.value.setOption(statistic);
            totalCommentAmount.value = res.data.commentAmount;
            totalUserAmount.value = res.data.userAmount;
            newUserAmount.value = res.data.newUser;
            newCommentAmount.value = res.data.newComment;
        }
    })
}
</script>

<style scoped lang='scss'>
.scroll-area {
  height: 300px; /* 设置滚动区域的高度 */
  width: 1000px; /* 设置滚动区域的宽度 */
}

@mixin shadow{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: ease-in-out 0.5s;
    
}
@mixin tran{
    transition: ease-in-out 0.3s;
    justify-self: center;
    align-self: center;
}
.dashboard-container{
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,1fr);
    gap:10px;
    padding:10px;
}
.chart-hot-mtv{
    width:100%;
    height:100%;
    border-radius: 5px;
    @include tran;
    h3{
        text-align: center;
    }
    div{
            width:90%;
            height:90%;
    }
}
.chart-hot-collection{
   height: 100%;
   width:100%;
    border-radius: 5px;
    margin:0 auto;
    @include tran;
    display: flex;
    justify-content: center;
    div{
        width:90%;
        height:100%;
        display: flex;
        justify-content: center;
        div{
            width: 100%;
            height:100%;
            margin:0 auto;
        }
    }
}
  
.chart-average-grade{
    width:100%;
    height:100%;
    border-radius: 5px;
    @include tran;
    .grade-top{
        display: flex;
        justify-content:space-around;
        align-items: center;
        margin-top: 5px;
        h3{
                text-align:center;
            }
    }
    
    .grade-container{
        display: flex;
        position: relative;
        width:100%;
        height:100%;
        div:first-child{
            width:90%;
            height:90%;
            position: absolute;
            left:0;
            top:0;
            z-index:5;
        }
        div:last-child{
            width:90%;
            height:90%;
            position: absolute;
            left:0;
            top:0;
            z-index:10;
        }
    }
} 

.website-user{
    width:100%;
    height:100%;
    border-radius: 5px;
    @include tran;
    .register-count{
        display: flex;
        justify-content:space-around;
        width:100%;
        height:max-content;
        
    }
    .line-diagram{
            width:100%;
            height:100%;
            display: flex;
            justify-content:center;
            div{
                width:90%;
                height:90%;
            }
        }
    h3{
        text-align: center;
    }
}

</style>